<template>
  
  <div>
    <!-- <el-card style="width: 65%;margin: 20px auto;">
      <el-input placeholder="请选择日期内容" v-model="input" style="width: 30%" clearable>
      </el-input>
      <el-button icon="el-icon-date" type="info" plain> 搜索</el-button>

      <div class="manage" style="float: right;">
      <el-button plain icon="el-icon-s-data">历史记录</el-button>
      <el-button plain type="danger" icon="el-icon-s-promotion">缺勤名单</el-button>
      </div>
    </el-card> -->

    <el-card style="width: 90%;margin: 20px auto;">
      <el-table :data="Table" max-height="320">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="id" label="工号"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">签到</el-button>
            <el-button type="text" size="small" style="color: #2c3e50">签退</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>

<script>
import Topbar from "@/components/Topbar.vue";

export default {
  name: "role1Attendance",
  components: { Topbar },
  data() {
    return {


      newTable: {
        id: '',
        name: '',
        createTime: '',
        state: '',

      },
      Table: [{
        id: '',
        name: '',
        createTime: '',
        state: '',

      }]

    }
  },
  mounted() {
    this.$axios.post('http://localhost:8090/attendance/get', null, {
      headers: {
        'Content-Type': 'application/json',
      }
    })
      .then(response => {
        this.Table = response.data;
        console.log(this.Table);
      })
      .catch(error => {
        console.error(error);
        // 处理出错情况，例如显示错误信息等等
      });
  },

  methods: {}

}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  margin-left: 240px;
  height: 500px;
  width: 70%;
}

.content {
  width: 80%;
  text-align: center;
  align-content: center;
  margin-left: 180px;
}
</style>